<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>系统管理 - 机勘院智能业务系统</title>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdn.bootcdn.net/ajax/libs/font-awesome/6.2.1/css/all.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
    <link href="../css/variables.css" rel="stylesheet">
    <link href="../css/components.css" rel="stylesheet">
    <link href="../css/main.css" rel="stylesheet">
    <link href="../css/system.css" rel="stylesheet">
</head>
<body>
    <!-- 顶部导航栏 -->
    <header class="deepseek-header">
        <div class="deepseek-header-brand">
            <div class="deepseek-header-mobile-toggle" id="sidebarToggle">
                <i class="fas fa-bars"></i>
            </div>
            <a href="../index.html" class="deepseek-logo">
                <img src="../images/logo.png" alt="机勘院Logo" height="40" class="me-2">
                <span>系统管理</span>
            </a>
        </div>
        <div class="deepseek-header-actions">
            <div class="deepseek-search-bar">
                <i class="fas fa-search"></i>
                <input type="text" placeholder="搜索..." id="systemSearch">
            </div>
            <div class="dropdown">
                <a href="#" class="position-relative me-2 fs-5 text-body" id="notificationsDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <i class="fas fa-bell"></i>
                    <span class="position-absolute top-0 start-100 translate-middle badge rounded-pill bg-danger">
                        3
                    </span>
                </a>
                <div class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="notificationsDropdown" style="min-width: 280px;">
                    <div class="dropdown-header d-flex justify-content-between align-items-center">
                        <span>通知</span>
                        <a href="#" class="text-muted text-decoration-none small">全部标为已读</a>
                    </div>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item py-2">
                        <div class="d-flex align-items-center">
                            <div class="flex-shrink-0 me-2">
                                <div class="avatar avatar-sm bg-primary text-white rounded-circle">
                                    <i class="fas fa-cog"></i>
                                </div>
                            </div>
                            <div class="flex-grow-1 pe-2">
                                <p class="mb-0 text-truncate">系统更新完成</p>
                                <span class="text-muted small">3分钟前</span>
                            </div>
                        </div>
                    </a>
                    <div class="dropdown-divider"></div>
                    <a href="#" class="dropdown-item text-center text-primary small">查看所有通知</a>
                </div>
            </div>
            <div class="dropdown">
                <a href="#" class="d-flex align-items-center text-decoration-none dropdown-toggle" id="userDropdown" data-bs-toggle="dropdown" aria-expanded="false">
                    <img src="../images/avatar.png" alt="用户头像" width="32" height="32" class="rounded-circle me-2">
                    <span>管理员</span>
                </a>
                <ul class="dropdown-menu dropdown-menu-end shadow-sm" aria-labelledby="userDropdown">
                    <li><a class="dropdown-item" href="#"><i class="fas fa-user me-2 text-muted"></i>个人资料</a></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-cog me-2 text-muted"></i>账号设置</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-question-circle me-2 text-muted"></i>帮助中心</a></li>
                    <li><hr class="dropdown-divider"></li>
                    <li><a class="dropdown-item" href="#"><i class="fas fa-sign-out-alt me-2 text-muted"></i>退出登录</a></li>
                </ul>
            </div>
        </div>
    </header>

    <div class="deepseek-overlay" id="sidebarOverlay"></div>

    <!-- 主体内容 -->
    <div class="d-flex">
        <!-- 侧边导航栏 -->
        <div class="deepseek-sidebar" id="sidebar">
            <div class="deepseek-nav-section">
                <div class="deepseek-nav-section-title">系统管理</div>
                <a href="#" class="deepseek-nav-item active" data-tab="user-management">
                    <i class="fas fa-users"></i>
                    <span>用户管理</span>
                </a>
                <a href="#" class="deepseek-nav-item" data-tab="roles-permissions">
                    <i class="fas fa-key"></i>
                    <span>角色权限</span>
                </a>
                <a href="#" class="deepseek-nav-item" data-tab="logs">
                    <i class="fas fa-clipboard-list"></i>
                    <span>系统日志</span>
                </a>
                <a href="#" class="deepseek-nav-item" data-tab="backup">
                    <i class="fas fa-database"></i>
                    <span>数据备份</span>
                </a>
                <a href="#" class="deepseek-nav-item" data-tab="ai-config">
                    <i class="fas fa-brain"></i>
                    <span>智能业务配置</span>
                </a>
            </div>
            
            <div class="deepseek-nav-section">
                <div class="deepseek-nav-section-title">快速导航</div>
                <a href="../index.html" class="deepseek-nav-item">
                    <i class="fas fa-home"></i>
                    <span>返回主页</span>
                </a>
                <a href="#" class="deepseek-nav-item" id="help-link">
                    <i class="fas fa-question-circle"></i>
                    <span>帮助中心</span>
                </a>
            </div>
        </div>
        
        <!-- 主内容区域 -->
        <div class="deepseek-main">
            <div class="container-fluid py-4">
                <!-- 系统状态概览 -->
                <div class="row g-3 mb-4">
                    <div class="col-md-3">
                        <div class="card stat-card h-100">
                            <div class="card-body">
                                <h6 class="card-subtitle mb-2 text-muted">系统可用性</h6>
                                <h3 class="card-title mb-0 stat-value">99.8%</h3>
                                <small class="stat-change positive">
                                    <i class="fas fa-arrow-up"></i> 0.3%
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card h-100">
                            <div class="card-body">
                                <h6 class="card-subtitle mb-2 text-muted">活跃用户数</h6>
                                <h3 class="card-title mb-0 stat-value">52</h3>
                                <small class="stat-change positive">
                                    <i class="fas fa-arrow-up"></i> 4.2%
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card h-100">
                            <div class="card-body">
                                <h6 class="card-subtitle mb-2 text-muted">内存使用</h6>
                                <h3 class="card-title mb-0 stat-value">2.85GB</h3>
                                <small class="stat-change negative">
                                    <i class="fas fa-arrow-down"></i> 0.5%
                                </small>
                            </div>
                        </div>
                    </div>
                    <div class="col-md-3">
                        <div class="card stat-card h-100">
                            <div class="card-body">
                                <h6 class="card-subtitle mb-2 text-muted">API调用/分钟</h6>
                                <h3 class="card-title mb-0 stat-value">193</h3>
                                <small class="stat-change positive">
                                    <i class="fas fa-arrow-up"></i> 5.2%
                                </small>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 系统资源监控 -->
                <div class="card mb-4">
                    <div class="card-header">
                        <div class="d-flex justify-content-between align-items-center">
                            <h5 class="mb-0">系统资源监控</h5>
                            <div class="btn-group">
                                <button class="btn btn-outline-secondary active" data-type="cpu">CPU</button>
                                <button class="btn btn-outline-secondary" data-type="memory">内存</button>
                                <button class="btn btn-outline-secondary" data-type="network">网络</button>
                            </div>
                        </div>
                    </div>
                    <div class="card-body">
                        <canvas id="systemResourceChart" height="300"></canvas>
                    </div>
                </div>

                <!-- 主要内容区域 - 将通过JS动态加载 -->
                <div id="system-content"></div>
            </div>
        </div>
    </div>

    <!-- 切换深色/浅色模式按钮 -->
    <button class="theme-toggle" id="themeToggle">
        <i class="fas fa-moon"></i>
    </button>

    <!-- 用户管理模态框 -->
    <div class="modal fade" id="userModal" tabindex="-1">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="userModalTitle">添加用户</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
                </div>
                <div class="modal-body">
                    <form id="userForm">
                        <div class="row g-3">
                            <div class="col-md-6">
                                <label class="form-label">用户名</label>
                                <input type="text" class="form-control" id="username" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">姓名</label>
                                <input type="text" class="form-control" id="fullName" required>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">密码</label>
                                <input type="password" class="form-control" id="password">
                                <small class="form-text text-muted">编辑用户时留空表示不修改密码</small>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">电子邮箱</label>
                                <input type="email" class="form-control" id="userEmail">
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">部门</label>
                                <select class="form-select" id="department">
                                    <option value="admin">系统管理部</option>
                                    <option value="project">项目管理部</option>
                                    <option value="road">道路勘察部</option>
                                    <option value="design">工程设计部</option>
                                </select>
                            </div>
                            <div class="col-md-6">
                                <label class="form-label">角色</label>
                                <select class="form-select" id="role">
                                    <option value="admin">管理员</option>
                                    <option value="manager">项目经理</option>
                                    <option value="engineer">工程师</option>
                                    <option value="viewer">浏览者</option>
                                </select>
                            </div>
                        </div>
                    </form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="saveUserBtn">保存</button>
                </div>
            </div>
        </div>
    </div>

    <!-- JavaScript 库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/dist/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.2.3/js/bootstrap.bundle.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/Chart.js/3.7.0/chart.min.js"></script>
    
    <!-- 自定义JS -->
    <script src="../js/system.js"></script>
</body>
</html> 